<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<style>
			/* 1，控制字体:字体家族属性 */
			{
				/* font-family指定字体,常用：微软雅黑，宋体， */
				font-family: 微软雅黑,sans-serif;
				/* 用户电脑端可能不存在指定字体，按照顺序指定一个字体，如果存在选定字体
				 sans-serif 无衬线字体，理解：黑体
				 */
				/* 字体尺寸属性：px单位：绝对值
				                em单位：相对于父元素字体大小 倍数【移动端】
				 */
				font-size: 1.5em;
				/* 字体加粗属性（考点）:属性值【数值整数范围：100~900】 400等于 normal
				                      属性值【英文：normal,bold】     900等于 bold*/
				font-weight: 600;
				/*字体样式属性（以子属性为主，与background不同）*/
				font-style: italic;
				/*文本转换属性:uppercase转大写，lowercase转小写，capitalize转单词首字符大写*/
				text-transform: uppercase;
				text-transform: lowercase;
				text-transform: capitalize;
				/*首行缩进属性*/
				text-indent: 200px;
			}
			/* 2，控制文本属性 */
			h1+p{
				border: 1px solid red;
				/* text-align文本对齐属性：left/right/center[具备宽度空间]
				                          justify【文本内容足够，两端对齐 */
				text-align: justify;
				/* line-height行高属性：数值px 主要功能：文本垂直居中，高度与行高一致*/
				height:40px;
				line-height: 40px;
				/* letter-spacing:[正负]数值px       设置字符的间距 */
				letter-spacing: 2px;
				/* word-spacing:[正负]数值px     设置单词的间距 */
				word-spacing: 10px;
			}
			/*3.文本装饰效果属性*/
			div a{
				border: 1px solid #ccc;
				padding: 8px;
				margin-left: 5px;
			}
			div a.current{/*加权重*/
				border: 0;
				color: #000;
				/* text-decoration超文本文本装饰属性：none 去掉下划线
				                                    underline  默认  自带下划线
													line-through  删除线
				*/
				text-decoration: none;
			}
			div p{
				/*文本阴影属性：【阴影三种：过滤：下阴影[文本阴影]盒子阴影】*/
				/*            X   Y  模糊程度  颜色*/
				text-shadow: 5px 5px 10px #00ff00;
			}
			/*4.处理文本换行属性*/
			div>span{
				/*white-space文本换行属性：nowrap 不换行 
				                          pre 保留空格与换行
										  normal 默认，空格合并，自动换行，回车不管
										  */
				border: 1px solid red;
				white-space: nowrap;
				white-space: pre;
				white-space: normal;
			}
		</style>
	</head>
	<body>
		<!-- 文本格式化属性:页面上下文或者字体
		 4种用途:①控制字体:font-family,font-size,font-weight
		        ②控制文本布局:text-align,line-height,letter-spacing等
				③文本装饰效果:text-decoration,text-shadow等
				④处理文本溢出:overflow,white-space等
		 -->
		 <h1>控制字体属性:font-family，font-size，font-weight</h1>
		 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quod autem eaque nostrum, atque debitis esse mollitia velit fugit voluptatum alias sint sed earum, ab tenetur quos similique? Facere, labore!
	     <h1>控制文本布局:text-align，line-height</h1>
		 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic minus excepturi veniam sint, voluptas eum tenetur autem libero itaque delectus rem ipsa similique ducimus! Nobis veniam molestias placeat quod?</p>
	     <h1>文本装饰效果</h1>
	     <div>
		     <a href="#" class="current">1</a>
		     <a href="#">2</a>
		     <a href="#">3</a>
		     <a href="#">4</a>
		     <a href="#">5</a>
			 <p>文本阴影效果</p>
		 </div>
		<h1>处理文本溢出与换行</h1>
		<div>
			<span>L          
			orem, ipsum dolor sit amet consectetur adipisicing elit. Sit perferendis dicta perspiciatis nobis ad illum debitis, labore rerum velit. Quia ullam vitae itaque nam aliquid nemo, distinctio incidunt. Eveniet, quisquam.
			</span>
		</div>
	</body>
</html>